<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
	    <script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../js/localstorage.js"></script>
		<script type="text/javascript" src="../js/qrcode.js"></script>
	    <link rel="stylesheet" type="text/css" href="../css/zTreeStyle.css">
	    <link rel="stylesheet" href="../css/Stylesheet.css">
		<style type="text/css">
		* {
	        margin: 0px;
	        padding: 0px;
	        font-size: 12px;
	    }
			th{text-align: center;}
			table img{width: 30px;}

			.table {
				box-shadow: 0 0;
			}
			div.list_paging_top, div.list_paging_bottom, div.ExportLinks a {
			    height: auto;
			}
			img{
				cursor: pointer;
			}
			#show {
				display: none;
				position: fixed;
				top: 25%;
				left: 42%;
				width: 280px;
				height: 280px;
				padding: 8px;
				border: 8px solid #E8E9F7;
				background-color: white;
				z-index: 1002;
				overflow: auto;
			}
			#bg {
				display: none;
				position: fixed;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index: 1001;
				-moz-opacity: 0.7;
				opacity: .70;
				filter: alpha(opacity=70);
			}
			
    	#tree{
            width: 140px;display: none;position: absolute;background: #fff;
        }
        #list{
            position: absolute;right: 0px;margin-top: 20px;width: 200px;background: #eaeaea;
        }
		</style><script type="text/javascript">
        // tree节点点击事件  name为这个节点的值
        function zTreeOnClick(event, treeId, treeNode) {
            $("#site").val(treeNode.name);
        };
        var setting = {
            callback: {
                onClick: zTreeOnClick
            }
        };
        var zNodes =[
            { name:"香港", open:true,
                children: [
                    { name:"九龙区",open:true,
                        children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"旺角区",open:true,
                            children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"西贡区",open:true,
                            children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"油尖旺区",open:true,
                           children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                        ]},
                    { name:"深水埗区",open:true,
                           children: [
                            { name:"场所A" },
                            { name:"场所B" },
                            { name:"场所C" }
                           ]}
                ]}
        ];
    $(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    })
    </script>
    <script type="text/javascript">
        $(function(){
        
            $("div").click(function(e){
                var id = $(this).attr("id");
                if(id == "aaa"){
                    return false;
                }else if(id == "tree"){
                    return false;
                }else{
                    $("#tree").slideUp(300);
                }
                return false;
            })

            $("#site").click(function(e){
                $("#tree").slideDown(300);
            })

            // $("#site").blur(function(e){
            //  $("#tree").slideUp(300);
            // })
            $("#tree").hover(function(){},function(){
                $("#tree").slideUp(300);
                // $("#site").blur();
            })
        })
    </script>
		<script type="text/javascript">
			function hidediv() {
				$('#bg').hide();
				$('#show').hide();
			}
			function add() {
				$('#myModal').modal('show');
			}
			var num = 5;
			var qrcode;
			function sub(){
				var code = Math.floor(Math.random()*1000000);
				var select = document.getElementById("select").value;
				num = num + 1;
				var html = "<tr class='odd_row'>\
						<td>"+num+"</td>\
						<td>"+code+"</td>";
				if(select == 1){
	    			var value = language.Guest;
	    			html += "<td style='color: #fff;'>"+value+"</td>";
	    		}else if(select == 2){
	    			var value = language.Contractor_visitors;
	    			html += "<td style='color: green;'>"+value+"</td>";
	    		}else if(select == 3){
	    			var value = language.Emergency_visitors;
	    			html += "<td style='color: red;'>"+value+"</td>";
	    		}
		        if(qrcode){
		        	document.getElementById("qrcode").innerHTML = "";
		            qrcode.clear();
		        }
		        // 创建二维码
		        qrcode = new QRCode(document.getElementById("qrcode"), {
		            width : 150,//设置宽高
		            height : 150
		        });
		 		qrcode.makeCode(code+","+value);
		        setTimeout(function(){
		            var src = $("#qrcode img").attr("src")
		            html += "<td>"+language.free+"</td>\
							<td></td>\
							<td style='padding: 15px;'><img  onclick='qrimg(this)' src='"+src+"' /></td>\
							<td>\
								<button>"+language.edit+"</button>\
								<button>"+language.delete+"</button>\
							</td>\
						</tr>"
					$("#tbody").append(html);
					alert(language.Add_success)
					$('#myModal').modal('hide');
		        },500)
			}
			function qrimg(o) {
				var src = $(o).attr('src');			
				$('#bg').show();
				$('#show').attr('src', src).show();
			}
		</script>
	</head>

	<body>
<div id="qrcode" style="display: none"></div>
	<div id="bg" onclick="hidediv()"></div>
	<img id="show" src="" alt="" />
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel"><script>document.write(language.Visitor_ID_card_making)</script></h4>
            </div>
            <div class="modal-body">
							<table class="table">
								<tbody>
									<tr>
										<td style="border:0px;">
											<script>
												document.write(language.type)
											</script>
										</td>
										<td style="border:0px;">
											<select id="select" class="form-control">
												<option value="1"><script>document.write(language.Guest)</script></option>
												<option value="2"><script>document.write(language.Contractor_visitors)</script></option>
												<option value="3"><script>document.write(language.Emergency_visitors)</script></option>
											</select>
										</td>
									</tr>
								</tbody>
							</table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><script>document.write(language.close)</script></button>
                <button type="button" class="btn btn-primary" onclick="sub()"><script>document.write(language.Submit)</script></button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


		<div class="pageheader">
			<div class="clear"></div>
			<!-- <img src="/Icons/fangke.png" alt="Customers" title="Customers"> -->
			<h1><script>document.write(language.xitong_fangke)</script></h1>
		</div>

		<div class="listFilter">
			<!--<h2><script>document.write(language.Filter)</script><span class="tooltip" style="display: none;"><em>(筛选下表)</em></span></h2>
			 <a href="#" class="tooltoggle">显示/隐藏工具提示</a> 
			<div class="divider"></div>-->
		    <table width="100%" id="query_table">
		        <tbody>
		        	<tr>
			            <td class="FormLabel" style="width: auto;">
		            	<script>
	                        document.write(language.Place_name)
	                        </script>：
	                        
	                        <div style="display: inline-block;" id="aaa">
	                            <input name="site" type="text" id="site" placeholder="Please choose site">
	                            <!-- <button class='button select_site'><script>document.write(language.Choice_site)</script></button> -->
	                            <div id="tree">
	                                <!-- <button style="float: right;" onclick="add()">增加</button> -->
	                                <ul id="treeDemo" class="ztree"></ul>
	                                </ul>
	                            </div>
	                        </div>
	                        
			            	<script>document.write(language.Visitor_code)</script>：
			            	<input name="ctl00$ContentPlaceHolder1$txtName" type="text" id="ctl00_ContentPlaceHolder1_txtName">
	                        <button class='button screen'><script>document.write(language.Filter)</script></button>
	                        <button class='button clear'><script>document.write(language.remove)</script></button>
			            	<button class='button add_button' onclick="add();"><script>document.write(language.create)</script></button>
			            </td>
	                   
			        </tr>
			    </tbody>
			</table>
	        <div class="formSubmit">
	        	<!-- <button class='button'><script>document.write(language.Filter)</script></button> -->
        		<!-- <button class='button'><script>document.write(language.remove)</script></button> -->
	        </div>
		</div>
		<div class="ExportLinks">
			<a class="common_operation1" href="#"><script>document.write(language.Export_all_to)</script> Excel</a>
			<a class="common_operation2" href="#"><script>document.write(language.Export_this_page_to)</script> Excel</a>
			<a class="common_operation3" href="#"><script>document.write(language.Export_this_page_to)</script> PDF</a>
			<a class="common_operation4" href="#"><script>document.write(language.Export_all_to)</script> PDF</a>
			<a class="common_operation5" href="#"><script>document.write(language.send)</script> <script>document.write(language.email)</script></a>
		</div>


		<div class="reportResults">
			<table class="list_table" id="ltReport_list" width="100%" cellspacing="0" style="text-align: center;">
				<!-- <caption><script>document.write(language.xitong_fangke)</script></caption> -->
				<thead>
					<tr>
						<th><script>document.write(language.order_number)</script></th>
						<th><script>document.write(language.Visitor_code)</script></th>
						<th><script>document.write(language.type)</script></th>
						<th><script>document.write(language.statu)</script></th> <!-- 空闲，发出-->
						<th><script>document.write(language.Holder)</script></th>
						<th><script>document.write(language.QR_code)</script></th>
						<th><script>document.write(language.operation)</script></th>
					</tr>
				</thead>
				<tbody id="tbody">
					<!--<tr class="odd_row">
						<td>1</td>
						<td>0000001</td>
						<td style="color: #fff;"><script>document.write(language.Guest)</script></td>
						<td><script>document.write(language.free)</script></td>
						<td></td>
						<td style="padding: 15px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button><script>document.write(language.edit)</script></button>
							<button><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					<tr class="even_row">
						<td>2</td>
						<td>0000002</td>
						<td style="color: green;"><script>document.write(language.Contractor_visitors)</script></td>
						<td><script>document.write(language.free)</script></td>
						<td></td>
						<td style="padding: 15px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button><script>document.write(language.edit)</script></button>
							<button><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					<tr class="odd_row">
						<td>3</td>
						<td>0000003</td>
						<td style="color: red;"><script>document.write(language.Emergency_visitors)</script></td>
						<td><script>document.write(language.free)</script></td>
						<td></td>
						<td style="padding: 15px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button><script>document.write(language.edit)</script></button>
							<button><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					<tr class="even_row">
						<td>4</td>
						<td>0000004</td>
						<td style="color: red;"><script>document.write(language.Emergency_visitors)</script></td>
						<td><script>document.write(language.Issue)</script></td>
						<td>消防</td>
						<td style="padding: 15px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button><script>document.write(language.edit)</script></button>
							<button><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					<tr class="odd_row">
						<td>5</td>
						<td>0000005</td>
						<td style="color: #fff;"><script>document.write(language.Guest)</script></td>
						<td><script>document.write(language.free)</script></td>
						<td></td>
						<td style="padding: 15px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button><script>document.write(language.edit)</script></button>
							<button><script>document.write(language.delete)</script></button>
						</td>
					</tr>-->
					
					
					
					<tr class="odd_row">
						<td>1</td>
						<td>0000001</td>
						<td style="color: #fff;">Guest</td>
						<td><script>document.write(language.free)</script></td>
						<td></td>
						<td style="padding: 5px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button class="edit"><script>document.write(language.edit)</script></button>
							<button class="delete"><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					<tr class="even_row">
						<td>2</td>
						<td>0000002</td>
						<td style="color: green;">Contractor visitors</td>
						<td><script>document.write(language.free)</script></td>
						<td></td>
						<td style="padding:5px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button class="edit"><script>document.write(language.edit)</script></button>
							<button class="delete"><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					<tr class="odd_row">
						<td>3</td>
						<td>0000003</td>
						<td style="color: red;">Emergency visitors</td>
						<td><script>document.write(language.free)</script></td>
						<td></td>
						<td style="padding: 5px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button class="edit"><script>document.write(language.edit)</script></button>
							<button class="delete"><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					<tr class="even_row">
						<td>4</td>
						<td>0000004</td>
						<td style="color: red;">Emergency visitors</td>
						<td><script>document.write(language.Issue)</script></td>
						<td></td>
						<td style="padding: 5px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button class="edit"><script>document.write(language.edit)</script></button>
							<button class="delete"><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					<tr class="odd_row">
						<td>5</td>
						<td>0000005</td>
						<td style="color: #fff;">Guest</td>
						<td><script>document.write(language.free)</script></td>
						<td></td>
						<td style="padding: 5px;"><img onclick="qrimg(this)" src="../img/1.png" /></td>
						<td>
							<button class="edit"><script>document.write(language.edit)</script></button>
							<button class="delete"><script>document.write(language.delete)</script></button>
						</td>
					</tr>
					
					
				</tbody>
			</table>

			

			<div class="WhereToLinks"></div>
		</div>
	</body>

</html>